<template>
    <div>
                <div class="block">
                    <span class="demonstration">发货地</span>
                    <el-cascader
                        v-model="value1"
                        :options="options"
                        @change="handleChange1">
                    </el-cascader>
                    <span class="demonstration">收货地</span>
                    <el-cascader
                        v-model="value2"
                        :options="options"
                        @change="handleChange2">
                    </el-cascader>

                    <span class="demonstration">发货时间</span>
                        <el-date-picker
                        v-model="value3"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                    <span class="demonstration">收回时间</span>
                        <el-date-picker
                        v-model="value4"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                        </el-date-picker>
                <el-button type="primary" round  @click="sub">确定</el-button>
                </div>

                <div style="float:left;">
                    <div class="map">
                    <baidu-map class="map"
                    :center="center"
                    scroll-wheel-zoom="true"
                    >
                        <!-- 折线 -->
                        <bm-polyline :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolylinePath"></bm-polyline>
                        <!-- 地图类型 -->
                        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
                        <!-- 定位 -->
                        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
                    
                    </baidu-map>
                
                </div>
                </div>

                <div style="float:right;width:610px;height:500px;padding:50px;">
                    <div class="sign">
                        <div v-for="(item,index) in signList" :key="index">
                            <el-button type="text" @click="changemap(index)">{{item.consignment}}</el-button>
                        </div>
                </div>
                </div>
                
                
   
            

    </div>
    
  
</template>

<script>
import {ShowAddr,ShowSignDet} from '../../api/api.js'
export default {
    data () {
    return {
        value1:"",
        value2:"",
        value3:"",
        value4:"",
        // 坐标
        polylinePath: [
            // {lng: 116.404, lat: 39.915},
            
        ],
        value:[],
        options:[],
        signList:[],
        center:"中国"
        
    }
  },
  methods: {
    updatePolylinePath (e) {
      this.polylinePath = e.target.getPath()
    },
    addPolylinePoint () {
      this.polylinePath.push({lng: 116.404, lat: 39.915})
    },
    handleChange1(value) {
        if(value[0] == value[1]){
            value.splice(0,1)
        }
        this.value1 = value.join('')
    },
    handleChange2(value) {
        if(value[0] == value[1]){
            value.splice(0,1)
        }
        this.value2 = value.join('')
    },
    // 发送请求
    sub(){
        let params = {
            "addr":this.value1,
            "address":this.value2,
            "begin":this.value3.toLocaleDateString().split('/').join("-"),
            "end":this.value4.toLocaleDateString().split('/').join("-")
        }
        // console.log(params)
        ShowSignDet(params).then(res=>{
            console.log(res)
            this.signList = res.data
        })
    },
    changemap(index){
        this.polylinePath = []
        let lng = this.signList[index].begin_long.split(',')
        let lat = this.signList[index].end_long.split(',')
        this.polylinePath.push({'lng':lng[0],'lat':lng[1]})
        this.polylinePath.push({'lng':lat[0],'lat':lat[1]})
        this.center = this.value1
        

    }
  },
  mounted(){
      ShowAddr().then(res=>{
          this.options = res.data.data
      })
  },
}
</script>



<style>
.map {
  width: 500px;
  height: 400px;
  float: left;
  
}
.sign {
    width: 400px;
    height: 200px;
    margin: auto;

}
.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
    float: left;
  }
</style>